<template>
  <el-container>
    <el-header>
      <el-menu
        mode="horizontal"
        :ellipsis="false"
        router
      >
        <el-menu-item index="/">
          <img src="../../assets/headlogo.png" alt="LOGO" style="height: 58px"
        /></el-menu-item>
        <div class="flex-grow" />
        <el-menu-item index="/"
          ><el-icon><HomeFilled /></el-icon>首页</el-menu-item
        >
        <el-sub-menu index="7">
          <template #title><el-icon><Promotion /></el-icon>发现</template>
          <el-menu-item @click="todrawer" index="/"
            ><el-icon><CollectionTag /></el-icon>疫苗信息</el-menu-item
          >
          <el-menu-item index="/"  @click="godrawer"
            ><el-icon><Place /></el-icon>接种地点</el-menu-item
          >
    
        </el-sub-menu>
        <el-menu-item index="/forumcenter"
          ><el-icon><Opportunity /></el-icon>论坛</el-menu-item
        >
        <el-menu-item index="/vaccinreservation"
          ><el-icon><Flag /></el-icon>预约</el-menu-item
        >
        <el-menu-item index="/backhelp"
          ><el-icon><Comment /></el-icon>反馈</el-menu-item
        >
        <el-menu-item v-if="!this.$store.state.UserDate" index="/userlogin"
          ><el-icon><UserFilled /></el-icon>登录</el-menu-item
        >

        <el-sub-menu index="2" v-else>
          <template #title>
            <img
              style="
                border-radius: 50%;
                vertical-align: middle;
              "
              :src="UserDate.avatar"
              height="30"
              width="30"
            />
          </template>
          <el-menu-item index="/mineself"
            ><el-icon><UserFilled /></el-icon>个人中心</el-menu-item
          >
          <el-menu-item index="/" @click="logout"
            ><el-icon><SwitchButton /></el-icon>提出登录</el-menu-item
          >
        </el-sub-menu>
      </el-menu>
    </el-header>
    <el-scrollbar height="100vh">
      <el-main>
        <router-view></router-view>
      </el-main>
      <el-footer>
        <el-row>
          <el-col :span="24">
            <div style="margin-top: 15px">
              <span>&copy;武汉设计工程学院版权所有</span>
              <el-divider direction="vertical" />
              <span>地址：武汉市江夏区藏龙岛开发区杨桥湖大道</span>
              <el-divider direction="vertical" />
              <span>邮编：430322</span>
              <el-divider direction="vertical" />
              <a href="tel:027-81730682">联系电话：027-12345678</a>
              <el-divider direction="vertical" />
              <span
                ><a
                  href="https://beian.miit.gov.cn/#/Integrated/index"
                  target="_blank"
                  >鄂ICP备123456789号-1</a
                ></span
              >
             
            </div>
          </el-col>
        </el-row>
      </el-footer></el-scrollbar
    >
    <el-drawer v-model="drawer" title="I am the title" :with-header="false">
    <el-card class="box-card">
   <template #header>
    <div>
      <span>库存疫苗名称</span>
    </div>
  </template>
  <div v-for="item in tableData" :key="item.id">
    <span style="font-size: 10px; color: rgb(23, 39, 39);">{{item.vname }}</span>
    <br>
    <span style="font-size: 8px; color: rgb(95, 149, 231);">{{ item.maker }}</span>
  </div>
</el-card>
  </el-drawer>

  <el-drawer v-model="thedrawer" title="I am the title" :with-header="false">
    <el-card class="box-card">
   <template #header>
    <div>
      <span>接种地点详情</span>
    </div>
  </template>
  <div v-for="item in adressData" :key="item.id">
    <span style="font-size: 10px; color: rgb(23, 39, 39);">{{item.address }}</span>
    <br>
    <span style="font-size: 8px; color: rgb(95, 149, 231);">{{ item.fromhospital }}</span>
  </div>
</el-card>
  </el-drawer>
  </el-container>
</template>
<script>
import { ElMessage, ElMessageBox } from "element-plus";
import { Store } from 'vuex';
export default {
  name: "index",
  components: { Store},
  data() {
    
    return {
      UserDate: {},
      drawer: false,
      tableData: [],
      adressData: [],
      thedrawer: false,
    };
  },
  methods: {
    getuserDate() {
      let token = localStorage.getItem("token");
      this.$http
        .post("/inoculations/user/getTokenId", token)
        .then((res) => {
          if (res.statusCode == "200") {
            this.UserDate = res.data;
          }
        })
        .catch(() => {
          ElMessage("欢迎使用新冠疫苗接种平台！");
          this.$store.state.UserDate = false;
        });
    },
    logout() {
      //如果在个人中心则跳回上一页
      this.$store.state.UserDate = false;
      localStorage.clear();
      if (this.$route.path === "/mineself") {
        this.$router.go(-1);
      }
      // logout().then(res => {
      //   this.$store.commit("logout");
      //   this.$toast({ type: "success", message: "注销成功" });
      // }).catch(err =>{
      //   console.log(err)
      // });
    },
    todrawer() {
      this.drawer = true;
      console.log("11111");
      this.$http
        .get("/inoculations/vaccin/pageall", {
          params: {
            pageNum: 1,
            pageSize: 20,
          },
        })
        .then((res) => {
          if (res.statusCode == "200") {
            this.tableData = res.data.records;
          }
        })
        .catch(() => {
          ElMessage.error("数据加载失败,请刷新！");
        });
    },
    godrawer(){
      this.thedrawer = true;
      this.$http
        .get("/inoculations/address/pageall", {
          params: {
            pageNum: 1,
            pageSize: 20,
          },
        })
        .then((res) => {
          if (res.statusCode == "200") {
            this.adressData = res.data.records;
          }
        })
        .catch(() => {
          ElMessage.error("数据加载失败,请刷新！");
        });
    }
  },
  created() {
    this.getuserDate();
    if(localStorage.getItem("token") == null){
      this.$store.state.UserDate = false;
    }else{
      this.$store.state.UserDate = true;
    }
  },
};
</script>
<style scoped>
.el-header {
  position: fixed;
  padding: 0;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
}
.flex-grow {
  flex-grow: 1;
}
.el-main {
  padding: 0;
  top: 0;
  left: 0;
  border: 0;
  min-height: 100vh;
  /* background-image: url("https://img2.baidu.com/it/u=2542373997,2069467627&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800");
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-size: cover; */
}
.el-footer {
  padding: 0;
  width: 100%;
  position: relative;
  text-align: center;
  background-color: #b0c4de;
  font-size: 14px;
}
.el-footer a {
  color: rgb(3, 3, 3);
  text-decoration: none;
}
.el-menu {
  height: 68px;
  background-color: rgba(217, 232, 248, 0.6);
  line-height: 68px;
  font-size: 18px;
  font-weight: 600;
  width: 100%;
  --el-menu-hover-bg-color: none;
}
.footer {
  text-align: center;
  padding: 10px 0;
  bottom: 0px;
  min-height: 40px;
  max-width: 100%;
  background-color: rgba(84, 92, 100, 0.6);
}
.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  vertical-align: middle;
  position: relative;
}
</style>
